<template>
	<!-- 数据来源 -->
	<div class="echarts" ref="echartsRef"></div>
</template>
<script setup lang="ts" name="cure">
import { ref } from 'vue'
import * as echarts from 'echarts'
import { useEcharts } from '@/hooks/useEcharts'

const echartsRef = ref<HTMLElement>()
const initChart = (data: any) => {
	const myChart: echarts.ECharts = echarts.init(echartsRef.value as HTMLElement)
	const option = {
		tooltip: {
			trigger: 'axis',
			backgroundColor: 'transparent',
			axisPointer: {
				type: 'none'
			},
			padding: 0,
			formatter: (p: any) => {
				let dom = `<div style="width:100%; height: 70px !important; display:flex;flex-direction: column;justify-content: space-between;padding:10px;box-sizing: border-box;
      color:#fff; background: #6B9DFE;border-radius: 4px;font-size:14px; ">
        <div style="display: flex; align-items: center;"> <div style="width:5px;height:5px;background:#ffffff;border-radius: 50%;margin-right:5px"></div>${p[0].name}</div>
        <div style="display: flex;align-items: center;"><div style="width:5px;height:5px;background:#ffffff;border-radius: 50%;margin-right:5px"></div>访问量 :  ${p[0].value}</div>
      </div>`
				return dom
			}
		},
		toolbox: {
			show: true,
			orient: 'horizontal'
		},
		grid: {
			left: '0',
			right: '0'
		},
		dataZoom: [
			{
				show: false,
				height: 10,
				xAxisIndex: [0],
				bottom: 0,
				startValue: 0, //数据窗口范围的起始数值
				endValue: 9, //数据窗口范围的结束数值
				handleStyle: {
					color: '#6b9dfe'
				},
				textStyle: {
					color: 'transparent'
				}
			},
			{
				type: 'inside',
				show: true,
				height: 0,
				zoomLock: true //控制伸缩
			}
		],
		xAxis: [
			{
				type: 'category',
				data: data.map((val: any) => {
					return {
						value: val.name
					}
				}),
				axisTick: {
					show: false
				},
				axisLabel: {
					// interval: time > 4 ? 27 : 0,
					margin: 20,
					interval: 0,
					color: '#a1a1a1',
					fontSize: 14,
					formatter: function (name: string) {
						undefined
						return name.length > 8 ? name.slice(0, 8) + '...' : name
					}
				},
				axisLine: {
					lineStyle: {
						color: '#F6F6F7',
						width: 2
					}
				}
			}
		],
		yAxis: [
			{
				min: 0,
				axisLine: {
					show: false
				},
				axisTick: {
					show: false
				},
				splitLine: {
					show: true,
					lineStyle: {
						type: 'dashed',
						color: '#edeff5',
						width: 2
					}
				},
				axisLabel: {
					color: '#a1a1a1',
					fontSize: 16,
					fontWeight: 400,
					formatter: function (value: number) {
						if (value === 0) {
							return value
						} else if (value >= 10000) {
							return value / 10000 + 'w'
						}
						return value
					}
				}
			}
		],
		series: [
			{
				name: 'Direct',
				type: 'bar',
				data: data.map((val: any) => {
					return {
						value: val.value
					}
				}),
				barWidth: 'auth',
				itemStyle: {
					color: '#C5D8FF',
					borderRadius: [12, 12, 0, 0]
				},
				emphasis: {
					itemStyle: {
						color: '#6B9DFE'
					}
				}
			}
		]
	}
	useEcharts(myChart, option)
}
defineExpose({
	initChart
})
</script>
<style lang="scss" scoped>
.echarts {
	width: 100%;
	height: 100%;
}
</style>
